<div ng-init="init();" class="kmi-layout-content IIoT0102-content">
    <div class="kmi-header-row">
        <div class="kmi-side-btn left" ng-click="back();">
            <i class="material-icons">&#xE408;</i>
            <div class="kmi-can-click"></div>
        </div>
        <div class="brand-title">
            <div class="custom" ng-if="companyName">
                <div class="title" ng-bind="companyName"></div>
                <img src="" alt="" class="brand">
                <div class="gap"></div>
            </div>
            <div class="digiwin">
                <img src="image/smes_v340/logo_ch.png" alt="">
                <img src="image/smes_v340/logo_en.png" alt="">
            </div>
        </div>
        <div class="header-title" ng-bind="'IIoT0102.title' | translate"></div>
        <div class="header-logo"></div>
    </div>
    <div class="kmi-layout-main-content">
        <div class="kmi-layout-page" style="text-align: center;">
            <div class="kmi-text-fields" style="flex-direction: row;">
                <div class="kmi-text-fields" style="flex:2;margin: 2px;">
                    <label class="label" ng-bind="'IIoT0102.report_start_title' | translate"></label>
                    <input mdl-datepicker="query_condition.report_start_time"
                        mdl-date-max="query_condition.report_end_time" />
                </div>
                <div class="kmi-text-fields" style="flex:2; margin: 2px;">
                    <label class="label" ng-bind="'IIoT0102.report_end_title' | translate"></label>
                    <input mdl-datepicker="query_condition.report_end_time"
                        mdl-date-min="query_condition.report_start_time" />
                </div>
                <div class="kmi-text-fields" style="flex: 1; margin: 2px;">
                    <div class="kmi-button kmi-button-confrim" ng-click="search()" style="width:100px">
                        <label ng-bind="'common.btn.search' | translate" class="ng-binding"></label>
                        <div class="kmi-can-click"></div>
                    </div>
                </div>
            </div>
            <div class="kmi-text-fields" style="flex-direction: row;padding-bottom:2px;">
                <div class="kmi-text-fields" style="flex: 2; margin: 2px;">
                    <label class="label" ng-bind="'IIoT0102.area_no_title' | translate"></label>
                    <input ng-model="query_condition.area_no"></input>
                    <div class="tip search" ng-click="load_area_no()" ng-model="query_condition.area_no"><i
                            class="material-icons">search</i></div>
                </div>
                <div class="kmi-text-fields" style="flex: 2; margin: 2px;">
                    <label class="label" ng-bind="'IIoT0102.equipment_no_title' | translate"></label>
                    <input ng-model="query_condition.equipment_no"></input>
                    <div class="tip search" ng-click="load_equipment_no()" ng-model="query_condition.equipment_no"><i
                            class="material-icons">search</i></div>
                </div>
                <div class="kmi-text-fields" style="flex: 1; margin: 2px;">

                </div>
            </div>
            <div class="kmi-text-fields" style="flex-direction: row;">
                <div class="kmi-text-fields" style="flex: 1; margin: 2px;">
                    <div class="dashboard-light-panel ng-binding status_0"
                        style="height:18px;width:18px;margin:auto 5px;"></div>
                    <label class="label" ng-bind="'IIoT0102.green_light_title' | translate"></label>
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="light_change(0)"
                        style="flex: 0 0 20px; height: 32px;">
                        <img ng-show="query_condition.light_list[0] == 0" src="image/icons/check0.png"></img>
                        <img ng-show="query_condition.light_list[0] == 1" src="image/icons/check1.png"></img>
                    </button>
                    <div class="dashboard-light-panel ng-binding status_1"
                        style="height:18px;;width:18px;margin:auto 5px;"></div>
                    <label class="label" ng-bind="'IIoT0102.orange_light_title' | translate"></label>
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="light_change(1)"
                        style="flex: 0 0 20px; height: 32px;">
                        <img ng-show="query_condition.light_list[1] == 0" src="image/icons/check0.png"></img>
                        <img ng-show="query_condition.light_list[1] == 1" src="image/icons/check1.png"></img>
                    </button>
                    <div class="dashboard-light-panel ng-binding status_2"
                        style="height:18px;width:18px;margin:auto 5px;"></div>
                    <label class="label" ng-bind="'IIoT0102.red_light_title' | translate"></label>
                    <button class="mdl-button mdl-js-button kmi-checkbox" ng-click="light_change(2)"
                        style="flex: 0 0 20px; height: 32px;">
                        <img ng-show="query_condition.light_list[2] == 0" src="image/icons/check0.png"></img>
                        <img ng-show="query_condition.light_list[2] == 1" src="image/icons/check1.png"></img>
                    </button>
                </div>
            </div>
            <div class="kmi-list column-selector" column-selector-id="prd_runtime_renew_info">
                <div class="kmi-list__header">
                    <!-- 20230313 modify by Alan for M#129881: -->
                    <div class="kmi-list__column width-fixed" style="flex:0 0 36px;">
                        <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="select_all_item();">
                            <img ng-if="!select_all" src="image/icons/check0.png"></img>
                            <img ng-if="select_all" src="image/icons/check1.png"></img>
                        </button>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <label ng-bind="'IIoT0102.list.list_column_1' | translate"></label>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <div class="filter" ng-show="filterSH.equipment_no">
                            <input ng-model="list_filter.equipment_no">
                            <i class="material-icons clear" style="position: absolute;top: 2px;right: 4px;"
                                ng-click="filterSH.equipment_no = false;list_filter.equipment_no = '';">clear</i>
                        </div>
                        <div class="order" ng-hide="filterSH.equipment_no">
                            <i class="material-icons search" style="z-index:1;"
                                ng-click="filterSH.equipment_no = true">search</i>
                            <label ng-bind="'IIoT0102.list.list_column_2' | translate"></label>
                        </div>
                    </div>
                    <div class="kmi-list__column head-controls" style="flex:1;">
                        <label ng-bind="'IIoT0102.list.list_column_3' | translate"></label>
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'IIoT0102.list.list_column_8' | translate">
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'IIoT0102.list.list_column_9' | translate">
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'IIoT0102.list.list_column_10'| translate">
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'IIoT0102.list.list_column_4' | translate">
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'IIoT0102.list.list_column_5' | translate">
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'IIoT0102.list.list_column_6' | translate">
                    </div>
                    <div class="kmi-list__column" style="flex:1;" ng-bind="'IIoT0102.list.list_column_7' | translate">
                    </div>
                </div>
                <div class="kmi-list__row-content">
                    <div class="kmi-list__row"
                        ng-repeat="item in prd_runtime_renew |filter:list_filter track by $index">
                        <div class="kmi-list__column" style="flex:0 0 36px;">
                            <button class="mdl-button mdl-js-button mdl-button--icon" ng-click="item_select(item)">
                                <img ng-if="!item.need_select" src="image/icons/check0.png"></img>
                                <img ng-if="item.need_select" src="image/icons/check1.png"></img>
                            </button>
                        </div>
                        <div class="kmi-list__column  column-border" style="flex:1;">
                            <div class="dashboard-light-panel ng-binding" ng-class="[light_status(item)]"></div>
                        </div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.equipment_no"></div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.equipment_name">
                        </div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.op_no"></div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.var_eqp_time_old">
                        </div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.var_eqp_time_new">
                        </div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.ct_ratio"></div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.product_no"></div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.product_name"></div>
                        <div class="kmi-list__column  column-border" style="flex:1;" ng-bind="item.report_date"></div>
                    </div>
                </div>
            </div>
        </div>
        <div class="kmi-layout-footer">
            <button class="mdl-button mdl-js-button mdl-button--fab mdl-shadow--custom mdl-button--custom1"
                ng-click="confirm();" ng-disabled="selectedList.length==0">
                <i class="material-icons">done</i>
            </button>
        </div>
    </div>
</div>